<template>
    <div class="nav-header">
        <div class="trigger">
            <menu-unfold-outlined
                v-if="props.collapsed"
                class="trigger"
                @click="changeTriggerStatus"
            />
            <menu-fold-outlined v-else class="trigger" @click="changeTriggerStatus" />
        </div>
        <div class="header-info">
            <div class="header-info-left">
                <YBreadcrumb :breadcrumb-infos="breadcrumbData"/>
            </div>
            <div class="header-info-right">
                <user-info/>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import UserInfo from "./user-info.vue";
import YBreadcrumb from "@/base-ui/breadcrumb"
import type {YBreadcrumbProp} from "@/base-ui/breadcrumb/types";
import {computed, ref} from "vue";
import loginStore from "@/store/login/login-store";
import {pathMapBreadcrumbs} from "@/utils/map-menus";
import {useRoute} from "vue-router";

const props = defineProps<{collapsed:boolean}>()
const store = loginStore();
// 面包屑数据
const breadcrumbData = computed(() => {
    const route = useRoute();
    const result =  pathMapBreadcrumbs(store.userMenus, route.path)
    return result;
});
// const breadcrumbData = ref<YBreadcrumbProp[]>(pathMapBreadcrumbs(store.userMenus, route.path));


const emits = defineEmits<{
    (e: 'collapse'):void
}>()

const changeTriggerStatus = () => {
    emits('collapse')
}

</script>

<style scoped lang="less">
.nav-header{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 100%;

    .trigger{
        font-size: 18px;
        padding: 0 5px;
        cursor: pointer;
        //transition: color 0.3s;
    }

    .header-info{
        display: flex;
        flex-direction: row;
        flex: 1;
        justify-content: space-between;
        align-items: center;

        .header-info-right{
            padding-right: 20px;
        }
    }
}


</style>
